<template>
    <div>
        <el-form :inline="true"   class="demo-form-inline" >
            <el-form-item :btnList="btnList">
                <template v-for="item in btnList">
                    <template v-if="item.id===''||btnAuthority.indexOf(item.id)>0">
                        <el-button :type="item.type" :icon="item.icon" @click="btnListClick(item.name)">{{item.name}}</el-button>
                    </template>
                </template>
            </el-form-item>
        </el-form>
    </div>



    <el-table
            :data="table.records"
            :pageColumns="pageColumns"
            border
            :height="curHeight"
            style="width: 100%"
            :optBtn="optBtn"
            :optWidth="optWidth"
            v-loading="loading"
            :formObject="formObject"
            :url="url"
            size="small"
            element-loading-text="拼命加载中"
            element-loading-spinner="el-icon-loading"
            element-loading-background="#fff"
            @selection-change="handleSelectionChange"
            >
        <el-table-column
                type="selection"
                width="55">
        </el-table-column>
        <template v-for="column in pageColumns">
            <el-table-column
                    show-overflow-tooltip
                    :prop="column.key"
                    :label="column.title"
                    :width="column.width">
                <template #default="scope">
                    <span v-if="column.yesNo">{{scope.row[column.key]===1?'是':'否'}}</span>

                    <span v-else>{{scope.row[column.key]}}</span>
                </template>
            </el-table-column>
        </template>



        <el-table-column
                fixed="right"
                label="操作"
                :width="optWidth">
            <template #default="scope">
                <template v-for="btn in optBtn">
                    <template v-if="btn.id===''||btnAuthority.indexOf(btn.id)>0">
                        <el-tooltip placement="top">
                            <template #content>
                                {{btn.name}}
                            </template>
                            <el-button  style="margin-right: 2px;"   @click="handleClick(scope.row,btn.name)"  :icon="btn.icon"  type="text" size="medium"></el-button>
                        </el-tooltip>
                    </template>


                </template>

            </template>
        </el-table-column>
    </el-table>
    <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[100, 200, 300, 400]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="table.total">
    </el-pagination>
</template>

<script>
    import {postReq} from "../../utils/api"

    export default {
        props:{
            pageColumns: undefined,
            optBtn: undefined,
            btnList: undefined,
            url:undefined,
            formObject: undefined,
            optWidth:undefined
        },
        mounted() {
            this.beforeMount(280)
        },
        created(){
            let arr = []
            let list= sessionStorage.getItem('btnList')
            if (list===undefined||''===list||null === list){
                arr = []
            }else{
                arr =  JSON.parse(list)
            }
            this.btnAuthority = arr
            console.log('this.btnAuthority---',this.btnAuthority)
        },
        data() {
            return {
                curHeight:undefined,
                multipleSelection: [],
                currentPage: 1,
                total: 5,
                loading:undefined,
                pageSize: 5,
                selectData: [],
                btnAuthority:undefined,
                table:{},
            }
        },

        methods: {
            //获取屏幕高度
            beforeMount(height) {
                let h = document.documentElement.clientHeight || document.body.clientHeight;
                this.curHeight =h - height;
            },
            btnAuthority(){

            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
                this.selectData=[]
                let data = []
                this.multipleSelection.forEach(function(item, index) {
                    //item 就是当日按循环到的对象
                    //index是循环的索引，从0开始
                    data[index] = item
                })
                this.selectData = data
                this.$emit('optClick', {obj:this.selectData,name:'selectData'})
            },
            handleSizeChange(val) {
                this.pageSize = val
                this.page()
            },
            handleCurrentChange(val) {
                this.currentPage = val
                this.page()
            },
            handleClick(row,name){
              this.$emit('optClick', {obj:row,name:name})// select事件触发后，自动触发updateInfo事件
            },
            btnListClick(name){
                this.$emit('btnListClick', name)
                console.log('name --- ',name)
            },

            searchParams(){
                let obj = {rows:this.pageSize,page:this.currentPage}
                return obj
            },
            page(){
                this.loading=true
                postReq(this.url+'?rows='+this.pageSize+'&page='+this.currentPage,this.formObject).then(res=>{
                    if (res.data.data){
                        this.table = res.data.data
                        this.loading = false
                    }
                })
            }
        }
    }
</script>

<style scoped>
    .el-table .cell {
          white-space: pre-line;
    }
</style>